<template>
    <div class="contain">
        <!-- 头部 -->
        <div>
            <div class="x-f">
                <div class="top">
                    <div class="imaTOP">
                        <img src="/src/assets/image/title_top.png" alt="" width="100%">

                        <div class="bgcTop">
                            <div class="x-bc">
                                <div class="x-f leftButton">
                                    <el-button class="button">瓶装燃气</el-button>
                                    <el-button type="primary">Primary</el-button>
                                    <el-button>瓶装燃气</el-button>
                                </div>
                                <div class="x-f rightButton">
                                    <el-button>瓶装燃气</el-button>
                                    <el-button type="primary">Primary</el-button>
                                    <el-button>瓶装燃气</el-button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div></div>
        </div>
        <div class="x-bc">
            <!-- 左边 -->
            <div class="y-start bgcLeft">
                <div class="leftOne">
                    <div class="x-bc">
                        <div class="font">
                            上季度城市燃气用户情况
                        </div>
                        <div class="count">
                            燃气总用户：269.5万户
                        </div>
                    </div>
                    <div class="x-bc">
                        <div class="echarts-box">
                            <div id="main" style="width: 100%; height: 230px"></div>
                        </div>
                        <div class="y-b number ">
                            <div class="x-bc ">
                                <div>居民用户</div>
                                <div>135.5万户</div>
                            </div>
                            <div class="x-bc">
                                <div>居民用户</div>
                                <div>135.5万户</div>
                            </div>
                            <div class="x-bc">
                                <div>居民用户</div>
                                <div>135.5万户</div>
                            </div>
                            <div class="x-bc">
                                <div>居民用户</div>
                                <div>135.5万户</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="leftOne">
                    <div class="echarts-lineBox">
                        <div id="gasLine" style="width: 100%; height: 260px"></div>
                    </div>
                </div>
                <div class="leftOne"></div>
            </div>
            <!-- 门站数量 -->
            <!-- <div class="y-start">
                <img src="../assets/image/group.png" alt="">
                <img src="../assets/image/group2.png" alt="">
                <img src="../assets/image/group3.png" alt="">
                <img src="../assets/image/group4.png" alt="">
            </div> -->
            <!-- 右边 -->
            <div class="y-end bgcRight">
                <div class="leftOne">
                    <div class="x-bc">
                        <div class="font">
                            上季度城市燃气用户情况
                        </div>
                        <div class="count">
                            燃气总用户：269.5万户
                        </div>
                    </div>
                    <div class="x-bc">
                        <div class="circleBox">
                            <div class="outerCircle">
                                <div class="innerCircle"></div>
                            </div>

                        </div>
                        <div class="y-c number ">
                            <div class="x-bc marB15">
                                <div>居民用户</div>
                                <div>135.5万户</div>
                            </div>
                            <div class="x-bc ">
                                <div>居民用户</div>
                                <div>135.5万户</div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="leftOne">
                    <div class="x-bc">
                        <div class="font">
                            2023-Q3季度
                        </div>
                        <div class="count">
                            城市加气站总销气量:23.5万吨
                        </div>
                    </div>
                    <div class="echarts-lineBox">
                        <div id="gasColumn" style="width: 100%; height: 260px"></div>
                    </div>
                </div>
                <div class="leftOne"></div>
            </div>

        </div>
        <!-- 底部 -->
        <div class="bgcBottom">
            <img src="/src/assets/image/img_dibucaidan.png" alt="" width="100%">
        </div>
    </div>
</template>

<script lang="ts" setup>
import { reactive, onMounted, onUnmounted, ref } from 'vue';
import * as echarts from 'echarts';
onMounted(
    () => {
        init();
        initLine();
        initGasColumn();
    }
)
function init() {
    // 基于准备好的dom，初始化echarts实例
    let myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    let option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {

                type: 'pie',
                radius: ['80%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 1048, name: '居民用户' },
                    { value: 735, name: 'Direct' },
                    { value: 580, name: 'Email' },
                    { value: 484, name: 'Union Ads' },

                ]
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
};
function initLine() {
    let myChart = echarts.init(document.getElementById('gasLine'));
    let option = {
        xAxis: {
            type: 'category',
            boundaryGap: false
        },
        yAxis: {
            type: 'value',
            boundaryGap: [0, '30%']
        },
        visualMap: {
            type: 'piecewise',
            show: false,
            dimension: 0,
            seriesIndex: 0,
            pieces: [
                {
                    gt: 1,
                    lt: 3,
                    color: 'rgba(0, 0, 180, 0.4)'
                },
                {
                    gt: 5,
                    lt: 7,
                    color: 'rgba(0, 0, 180, 0.4)'
                }
            ]
        },
        series: [
            {
                type: 'line',
                smooth: 0.6,
                symbol: 'none',
                lineStyle: {
                    color: '#5470C6',
                    width: 2
                },
                markLine: {
                    symbol: ['none', 'none'],
                    label: { show: false },
                    data: [{ xAxis: 1 }, { xAxis: 3 }, { xAxis: 5 }, { xAxis: 7 }]
                },
                areaStyle: {},
                data: [
                    ['2019', 200],
                    ['2020', 560],
                    ['2021', 750],
                    ['2022', 580],
                    ['2023', 250],
                    ['2024', 300],

                ]
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
};
function initGasColumn() {
    let dataAxis = [];
    let myChart = echarts.init(document.getElementById('gasColumn'));
    let data = [90, 149, 210, 122, 133, 334, 198, 123, 125, 220];
    let yMax = 500;
    let dataShadow = [];
    for (let i = 0; i < data.length; i++) {
        dataShadow.push(yMax);
    }
    let option = {

        xAxis: {

            axisLabel: {
                inside: true,
                color: '#fff'
            },
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            z: 10
        },
        yAxis: {
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#999'
            }
        },

        dataZoom: [
            {
                type: 'inside'
            }
        ],
        series: [
            {
                type: 'bar',
                showBackground: true,
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#83bff6' },
                        { offset: 0.5, color: '#188df0' },
                        { offset: 1, color: '#188df0' }
                    ])
                },
                emphasis: {
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#2378f7' },
                            { offset: 0.7, color: '#2378f7' },
                            { offset: 1, color: '#83bff6' }
                        ])
                    }
                },
                data: data
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    const zoomSize = 6;
    myChart.on('click', function (params) {
        console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
        myChart.dispatchAction({
            type: 'dataZoom',
            // startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
            // endValue:
            //     dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
        });
    });
}

</script>


<style scoped lang="scss">
.contain {
    padding: 0;
    margin: 0;
    // width: 3920px;
}


.leftOne {
    height: 250px;
    width: 396px;
    border: 1px solid pink;
    opacity: 0.5;
    // background: rgba(30, 45, 72, 0.3);
    background: rgba(30, 45, 72, 0.3);
    // background: linear-gradient(to right, #00f5f6, #00ff00);
    padding: 10px;
    margin-bottom: 10px;
}

.imaTOP {
    width: 100%;
    // border: 1px solid saddlebrown;
    position: relative;
}

.top {
    background: linear-gradient(to bottom, #00020B 30%, rgba(0, 0, 0, 0.3));
    //     background: rgba(30, 45, 72, 0.3);
}

.bgcLeft {
    background: linear-gradient(to right, black, rgba(0, 0, 0, 0.1));
}

.bgcRight {
    background: linear-gradient(to left, black, rgba(0, 0, 0, 0.1));
}

.bgcBottom {
    background: linear-gradient(to top, black, rgba(0, 0, 0, 0.3));
}

.leftButton {
    position: absolute;
    top: 25px;
    left: 0;
    width: 100px;
    height: 40px;
}

.rightButton {
    position: absolute;
    top: 25px;
    right: 0;
    width: 300px;
    height: 40px;
}

.font {
    color: #4c93f4;
    // font-size: 14px;
}

.count {
    color: white;
}

.button {
    width: 124px;
    height: 44px;
    background: #00020B linear-gradient(180deg, #00AAFF 0%, #0091FF 100%), linear-gradient(306deg, #00AAFF 0%, rgba(0, 145, 255, 0.5) 28%, rgba(0, 1, 25, 0) 71%);
    border-radius: 8px 8px 8px 8px;
    opacity: 1;
    border: 2px solid rgba(0, 145, 255, 0.5);
}

.echarts-box {

    width: 50%;
}

.echarts-lineBox {
    // border: 1px solid goldenrod;
    width: 100%;
}

.number {
    width: 50%;

    height: 180px;
}

.circleBox {

    display: flex;
    justify-content: center;
    align-items: center;
    height: 230px;
    width: 200px;
}

.outerCircle {
    width: 100px;
    height: 100px;
    // background-color: lightblue;
    border: 10px solid pink;
    border-radius: 50%;
    position: relative;
}

.innerCircle {
    width: 60px;
    height: 60px;
    border: 10px solid skyblue;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
</style>